"use client"

import {
   BookOpen,
   Bot,
   Command,
   Frame,
   LifeBuoy,
   Map,
   PieChart,
   Send,
   Settings2,
   SquareTerminal,
} from "lucide-react"
import type * as React from "react"

import { NavMain } from "~/registry/miami/blocks/sidebar-08/components/nav-main"
import { NavProjects } from "~/registry/miami/blocks/sidebar-08/components/nav-projects"
import { NavSecondary } from "~/registry/miami/blocks/sidebar-08/components/nav-secondary"
import { NavUser } from "~/registry/miami/blocks/sidebar-08/components/nav-user"
import {
   Sidebar,
   SidebarContent,
   SidebarFooter,
   SidebarHeader,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
} from "~/registry/miami/ui/sidebar"

const data = {
   user: {
      name: "nyxb",
      email: "m@example.com",
      avatar: "/avatars/nyxb.jpg",
   },
   navMain: [
      {
         title: "Playground",
         url: "#",
         icon: SquareTerminal,
         isActive: true,
         items: [
            {
               title: "History",
               url: "#",
            },
            {
               title: "Starred",
               url: "#",
            },
            {
               title: "Settings",
               url: "#",
            },
         ],
      },
      {
         title: "Models",
         url: "#",
         icon: Bot,
         items: [
            {
               title: "Genesis",
               url: "#",
            },
            {
               title: "Explorer",
               url: "#",
            },
            {
               title: "Quantum",
               url: "#",
            },
         ],
      },
      {
         title: "Documentation",
         url: "#",
         icon: BookOpen,
         items: [
            {
               title: "Introduction",
               url: "#",
            },
            {
               title: "Get Started",
               url: "#",
            },
            {
               title: "Tutorials",
               url: "#",
            },
            {
               title: "Changelog",
               url: "#",
            },
         ],
      },
      {
         title: "Settings",
         url: "#",
         icon: Settings2,
         items: [
            {
               title: "General",
               url: "#",
            },
            {
               title: "Team",
               url: "#",
            },
            {
               title: "Billing",
               url: "#",
            },
            {
               title: "Limits",
               url: "#",
            },
         ],
      },
   ],
   navSecondary: [
      {
         title: "Support",
         url: "#",
         icon: LifeBuoy,
      },
      {
         title: "Feedback",
         url: "#",
         icon: Send,
      },
   ],
   projects: [
      {
         name: "Design Engineering",
         url: "#",
         icon: Frame,
      },
      {
         name: "Sales & Marketing",
         url: "#",
         icon: PieChart,
      },
      {
         name: "Travel",
         url: "#",
         icon: Map,
      },
   ],
}

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   return (
      <Sidebar variant="inset" {...props}>
         <SidebarHeader>
            <SidebarMenu>
               <SidebarMenuItem>
                  <SidebarMenuButton size="lg" asChild>
                     <a href="#">
                        <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                           <Command className="size-4" />
                        </div>
                        <div className="grid flex-1 text-left text-sm leading-tight">
                           <span className="truncate font-semibold">
                              Acme Inc
                           </span>
                           <span className="truncate text-xs">Enterprise</span>
                        </div>
                     </a>
                  </SidebarMenuButton>
               </SidebarMenuItem>
            </SidebarMenu>
         </SidebarHeader>
         <SidebarContent>
            <NavMain items={data.navMain} />
            <NavProjects projects={data.projects} />
            <NavSecondary items={data.navSecondary} className="mt-auto" />
         </SidebarContent>
         <SidebarFooter>
            <NavUser user={data.user} />
         </SidebarFooter>
      </Sidebar>
   )
}
